<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>${alert}
  </head>
  <style>
  	.textarea {overflow:visible}
  	.temp {width:50px}
  	.key {width:250px}
  	#checkUpdate {
  		margin-bottom: 10px;
  	}
  	#paging {
  		margin-top: 7px;
  	}
  </style>
  <script>
  function resize(obj) {
    obj.style.height = "1px";
    obj.style.height = (5+obj.scrollHeight)+"px";
  }
</script>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header clearfix">
			<h2 class="pull-left">2차 카테고리 관리 - <small style="color:#ff0000;"><a href="firstCategory.do">${firstInfo.firstCategoryText}</a></small></h2>
			<div class="pull-right" style="padding-top: 30px">
				<a href="#" id="opensearch" class="btn btn-info">2차카테고리 등록 펼치기/접기</a>
			</div>
		</div>
		
		<div id="searchdiv">
			<div class="clearfix">
				<div class="table-responsive">
					<form id="insertSecondCategory" class="form-horizontal" role="form" method="get" action="secondCategory.do">
					
						<input type="hidden" name="page" value="${page.nowPage}"/>
						<input type="hidden" name="pageCnt" value="${pageCnt}"/>
						<input type="hidden" name="idFirst" value="${firstInfo.idFirstCategory}"/>
						
						<table class="table table-bordered">
							<thead>
								<tr class="success">
									<th class="text-center col-md-2">1차카테고리</th>
									<th class="text-center col-md-2">이름</th>
									<th class="text-center col-md-4">키워드</th>
									<th class="text-center col-md-1">정렬순서</th>
									<th class="text-center col-md-2">전시여부</th>
									<th class="text-center col-md-1">추가</th>
								</tr>
							</thead>
							<tbody>
								<tr class="text-center">
									<td class="col-md-2">${firstInfo.firstCategoryText}</td>
									<td class="col-md-2"><input type="text" class="form-control" name="insertSecondCategoryText"/></td>
									<td class="col-md-4">
										<textarea name="insertKeyWord" class="form-control textarea" onKeyUp="resize(this)" placeholder="키워드를 콤마로 구분하여 입력하세요."></textarea>
									</td>
									<td class="col-md-1"><input type="number" class="form-control" name="insertSortKey"/></td>
									<td class="col-md-2">
										<label class="radio-inline"><input type="radio" name="insertIsDisplay" value="1"> Y</label>
										<label class="radio-inline"><input type="radio" name="insertIsDisplay" value="0"> N</label>
									</td>
									<td class="col-md-1"><button type="submit" class="btn btn-primary btn-block btn-sm">등록</button></td>
								</tr>
							</tbody>
						</table>
					</form>
				</div>
				<hr/>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-10">
				<span class="pull-left" style="margin-bottom:10px;">등록 : ${page.totalArticleCount}건 / 활성 : ${display}건 / 비활성 : ${unDisplay}</span>
			</div>
			<div class="col-md-1">
				<div id="paging" class="dropdown clearfix">
					<a id="dropdownMenu2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">페이징 <b class="caret"></b></a>
					<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
						<li role="presentation"><a role="menuitem" tabindex="-1" href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&pageCnt=10">10개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&pageCnt=20">20개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&pageCnt=30">30개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&pageCnt=40">40개씩</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1" href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&pageCnt=50">50개씩</a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-1">
				<form id="updateSecond" role="form" method="post" action="secondCategory.do"></form>
				<button type="submit" class="btn btn-danger pull-right" form="updateSecond" id="checkUpdate">선택수정</button>
				<input type="hidden" name="idFirst" value="${firstInfo.idFirstCategory}" form="updateSecond"/>
				<input type="hidden" name="page" value="${page.nowPage}" form="updateSecond"/>
				<input type="hidden" name="pageCnt" value="${pageCnt}" form="updateSecond"/>
				<input type="hidden" name="idFirst" value="${firstInfo.idFirstCategory}" form="updateSecond"/>
			</div>
		</div>
		
		<div class="table-responsive">
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1 temp">선택</th>
						<th class="text-center col-md-1 temp">항번</th>
						<th class="text-center col-md-2">1차카테고리</th>
						<th class="text-center col-md-2">이름</th>
						<th class="text-center col-md-2 key">키워드</th>
						<th class="text-center col-md-1">정렬순서</th>
						<th class="text-center col-md-1">전시여부</th>
						<th class="text-center col-md-1">등록일시</th>
						<th class="text-center col-md-1">수정</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${second}" var="list">
						<form id="updateSecondCategory${list.idSecondCategory}" role="form" method="get" action="secondCategory.do"></form>
						<input type="hidden" name="idFirst" value="${firstInfo.idFirstCategory}" form="updateSecondCategory${list.idSecondCategory}"/>
						<input type="hidden" name="page" value="${page.nowPage}" form="updateSecondCategory${list.idSecondCategory}"/>
						<input type="hidden" name="pageCnt" value="${pageCnt}" form="updateSecondCategory${list.idSecondCategory}"/>
						<input type="hidden" name="param" value="${list.idSecondCategory}" form="updateSecondCategory${list.idSecondCategory}"/>
						
						<input type="hidden" name="param" value="${list.idSecondCategory}" form="updateSecond"/>
						
						<tr class="text-center row">
							<td class="col-md-1 temp">
								<input type="checkbox" class="temp" name="update_list" value="${list.idSecondCategory}" form="updateSecond"/>
							</td>
							<td class="col-md-1 temp">${list.idSecondCategory}</td>
							<td class="col-md-2">
								<select name="updateIdFirstCategory${list.idSecondCategory}" class="form-control" form="updateSecondCategory${list.idSecondCategory}">
									<option>- 선택하세요 -</option>
									<c:forEach items="${first}" var="flist">
										<c:choose>
											<c:when test="${flist.idFirstCategory == list.idFirstCategory}">
												<option value="${flist.idFirstCategory}" selected>${flist.firstCategoryText}</option>
											</c:when>
											<c:otherwise>
												<option value="${flist.idFirstCategory}">${flist.firstCategoryText}</option>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</select>
							</td>
							<td class="col-md-2">
								<input type="text" class="form-control" name="updateSecondCategoryText${list.idSecondCategory}"
									value="${list.secondCategoryText}" form="updateSecondCategory${list.idSecondCategory}"/>
							</td>
							<td class="col-md-2 key">
								<textarea name="updateKeyWord${list.idSecondCategory}" class="form-control textarea key" form="updateSecondCategory${list.idSecondCategory}" 
									onfocus="resize(this)" onKeyUp="resize(this)">${list.keyWord}</textarea>
							</td>
							<td class="col-md-1">
								<input type="number" class="form-control" name="updateSortKey${list.idSecondCategory}" value="${list.sortKey}" form="updateSecondCategory${list.idSecondCategory}"/>
							</td>
							<td class="col-md-1">
								<c:choose>
									<c:when test="${list.isDisplay == 1}">
										<label class="radio-inline">
											<input type="radio" name="updateIsDisplay${list.idSecondCategory}" value="1" checked form="updateSecondCategory${list.idSecondCategory}"> Y
										</label>
										<label class="radio-inline">
											<input type="radio" name="updateIsDisplay${list.idSecondCategory}" value="0" form="updateSecondCategory${list.idSecondCategory}"> N
										</label>
									</c:when>
									<c:otherwise>
										<label class="radio-inline">
											<input type="radio" name="updateIsDisplay${list.idSecondCategory}" value="1" form="updateSecondCategory${list.idSecondCategory}"> Y
										</label>
										<label class="radio-inline">
											<input type="radio" name="updateIsDisplay${list.idSecondCategory}" value="0" checked form="updateSecondCategory${list.idSecondCategory}"> N
										</label>
									</c:otherwise>
								</c:choose>
							</td>
							<td class="col-md-1">${fn:substring(list.create_date, 0, 4)}-${fn:substring(list.create_date, 4, 6)}-${fn:substring(list.create_date, 6, 8)}</td>
							<td class="col-md-1"><button type="submit" class="btn btn-defalut btn-block btn-sm" form="updateSecondCategory${list.idSecondCategory}">수정</button></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&page=${page.startPage-1}&pageCnt=${pageCnt}">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&page=${now}&pageCnt=${pageCnt}">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="secondCategory.do?idFirst=${firstInfo.idFirstCategory}&page=${page.endPage+1}&pageCnt=${pageCnt}">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>

	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#insertSecondCategory").submit(function() {
				
				if (!$("input[name='insertSecondCategoryText']").val().isValue()) {
					alert("카테고리 이름을 입력하세요.");
					$("input[name='insertSecondCategoryText']").focus();
					return false;
				}
				
				if (!$("input[name='insertSortKey']").val().isValue()) {
					alert("정렬순서를 입력하세요.");
					$("input[name='insertSortKey']").focus();
					return false;
				}
				
				if (!$("input[name='insertSortKey']").val().isNumber()) {
					alert("정렬순서는 숫자로만 입력이 가능합니다.");
					$("input[name='insertSortKey']").focus();
					return false;
				}
				
				if (!$("input[name='insertIsDisplay']").is(":checked")) {
					alert("전시여부를 선택해 주세요");
					$("input[name='insertIsDisplay']").focus();
					return false;
				}
				
				if (!confirm("정말 등록하시겠습니까?")) {
					return false;
				}
			});
			
			<c:forEach items="${second}" var="list">
				
				$("textarea[name='updateKeyWord${list.idSecondCategory}']").focus();
			
				$("#updateSecondCategory${list.idSecondCategory}").submit(function() {
					
					if ($("select[name='updateIdFirstCategory${list.idSecondCategory}'] > option:selected").index() < 1) {
						alert("1차 카테고리를 선택하세요.");
						$("select[name='updateIdFirstCategory${list.idSecondCategory}']").focus();
						return false;
					}
					
					if (!$("input[name='updateSecondCategoryText${list.idSecondCategory}']").val().isValue()) {
						alert("카테고리 이름을 입력하세요.");
						$("input[name='updateSecondCategoryText${list.idSecondCategory}']").focus();
						return false;
					}
					
					if (!$("input[name='updateSortKey${list.idSecondCategory}']").val().isValue()) {
						alert("정렬순서를 입력하세요.");
						$("input[name='updateSortKey${list.idSecondCategory}']").focus();
						return false;
					}
					
					if (!$("input[name='updateSortKey${list.idSecondCategory}']").val().isNumber()) {
						alert("정렬순서는 숫자로만 입력이 가능합니다.");
						$("input[name='updateSortKey${list.idSecondCategory}']").focus();
						return false;
					}
					
					if (!$("input[name='updateIsDisplay${list.idSecondCategory}']").is(":checked")) {
						alert("전시여부를 선택해 주세요");
						$("input[name='updateIsDisplay${list.idSecondCategory}']").focus();
						return false;
					}
					
					if (!confirm("정말 수정하시겠습니까?")) {
						return false;
					}
					
				});
			</c:forEach>
			
			$("input[name='insertSecondCategoryText']").focus();
		});
	</script>
	<script>
		$(function() {
			$("#searchdiv").hide();
			
			$("#opensearch").click(function() {
				$("#searchdiv").toggle();
				return false;
			});
			
			$("#updateSecond").submit(function() {
				if (!$("input[name='update_list']").is(":checked")) {
					alert("수정할 카테고리의 체크박스를 선택하세요.");
					return false;
				}
				
				if (!confirm("정말 수정하시겠습니까?")) {
					return false;
				}
				
				<c:forEach items="${second}" var="list">
				
					if ($("select[name='updateIdFirstCategory${list.idSecondCategory}'] > option:selected").index() < 1) {
						alert("1차 카테고리를 선택하세요.");
						$("select[name='updateIdFirstCategory${list.idSecondCategory}']").focus();
						return false;
					}
					
					$("select[name='updateIdFirstCategory${list.idSecondCategory}']").attr("form", "updateSecond");
					$("select[name='updateIdFirstCategory${list.idSecondCategory}']").attr("name", "updateIdFirstCategory");
					
					if (!$("input[name='updateSecondCategoryText${list.idSecondCategory}']").val().isValue()) {
						alert("카테고리 이름을 입력하세요.");
						$("input[name='updateSecondCategoryText${list.idSecondCategory}']").focus();
						return false;
					}
					
					$("input[name='updateSecondCategoryText${list.idSecondCategory}']").attr("form", "updateSecond");
					$("input[name='updateSecondCategoryText${list.idSecondCategory}']").attr("name", "updateSecondCategoryText");
					
					
					if (!$("input[name='updateSortKey${list.idSecondCategory}']").val().isValue()) {
						alert("정렬순서를 입력하세요.");
						$("input[name='updateSortKey${list.idSecondCategory}']").focus();
						return false;
					}
					
					if (!$("input[name='updateSortKey${list.idSecondCategory}']").val().isNumber()) {
						alert("정렬순서는 숫자로만 입력이 가능합니다.");
						$("input[name='updateSortKey${list.idSecondCategory}']").focus();
						return false;
					}
					
					$("input[name='updateSortKey${list.idSecondCategory}']").attr("form", "updateSecond");
					$("input[name='updateSortKey${list.idSecondCategory}']").attr("name", "updateSortKey");
					
					if (!$("input[name='updateIsDisplay${list.idSecondCategory}']").is(":checked")) {
						alert("전시여부를 선택해 주세요");
						$("input[name='updateIsDisplay${list.idSecondCategory}']").focus();
						return false;
					}
					
					$("input[name='updateIsDisplay${list.idSecondCategory}']").attr("form", "updateSecond");
					
					$("textarea[name='updateKeyWord${list.idSecondCategory}']").attr("form", "updateSecond");
					$("textarea[name='updateKeyWord${list.idSecondCategory}']").attr("name", "updateKeyWord");
				
				</c:forEach>
			});
		});
	</script>
  </body>
</html>